<template>
  <div>
    <div class="big_pic_box" @click="exitBigPic">
      <img src="" alt="" class="big_pic">
    </div>
    <span v-if="loading">loading...</span>
    <router-view v-else></router-view>
  </div>
</template>

<script>


import axios from "axios";

let socket
export default {
  name: 'App',
  data() {
    return {
      loading: false
    }
  },
  methods: {
    sendMessage(msg) {
      socket.send(JSON.stringify(msg))
    },
    exitBigPic(e) {
      let div = e.target
      if (div.tagName === 'IMG')
        div = div.parentNode
      div.style.display = 'none'
    },
  },
  mounted() {
    this.$bus.$on("sendMessage", this.sendMessage)
    this.loading = true
    axios.get('/api/user')
        .then(res => {
          this.loading = false
          if (res.data.code === 0) {
            let user = res.data.data
            user.avatar = '/api/res/' + user.avatar
            this.$store.commit('setUser', user)
            this.$router.replace("/index/home?" + Math.random())
          } else {
            this.$router.replace("/login?" + Math.random())
          }
        }).catch(err => this.$message.error(err))
  },
  created() {
    document.oncontextmenu = () => {
      return false
    }
  },
  watch: {
    "$store.state.user.id": {
      immediate: true,
      handler(value) {
        if (value !== "") {
          if (typeof WebSocket == "undefined") {
            console.log("您的浏览器不支持WebSocket");
          } else {
            console.log("您的浏览器支持WebSocket");
            // let socketUrl = "ws:"+location.host+ `/ws/socket/user/${value}`;
            let socketUrl = `ws://localhost:913/socket/user/${value}`;
            console.log(socketUrl)
            if (socket != null) {
              socket.close();
              socket = null;
            }

            socket = new WebSocket(socketUrl)

            socket.onopen = () => {
              console.log("WebSocket连接成功");
            };

            socket.onclose = () => {
              // axios.get("/api/user/status/2")

              console.log("WebSocket连接关闭");
            };

            socket.onerror = (event) => {
              console.error("WebSocket错误", event);
            };

            socket.onmessage = (event) => {
              if (event.data === '您的账号在别处登录') {
                this.$alert(event.data, '提示', {
                  confirmButtonText: '确定',
                  callback: () => {
                    axios.get("/api/user/logout")
                        .then(() => {
                          this.$store.commit('setUser', {id: ''})
                          this.$router.go(0)
                        })
                  }
                });
              } else {
                this.$bus.$emit("receiveMsg", event.data)
              }
            };
            window.addEventListener('beforeunload', () => {
              socket.close()
            });
          }
        }
      }
    }
  }
}

</script>

<style>

a {
  text-decoration: none;
  color: black;
  cursor: pointer;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.5);
}

.part_line {
  margin: 10px auto;
  width: 80%;
  height: 1px;
  border-top: 1px solid #f1f2f5;
}



img {
  cursor: pointer;
}


.big_pic_box {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 9999;
  padding: 20px 0;
  text-align: center;
;}

.big_pic {
  max-height: 100%;
  max-width: 100%;
}
.el-icon-male {
  color: #409EFF;
}

.el-icon-female {
  color: hotpink;
}
</style>
